{% extends "base.html" %}
{% block title %}GAE图片分享{% endblock %}
{% block head %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.gallery.js"></script>
<style type="text/css"> 
    ul.gallery {
        width: 700px;
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
</style>

{% endblock %}

{% block main %}
<h2><a href="/" title="图片列表">图片列表</a> | Slide Show | <a href="/admin/upload2/" title="上传图片">上传图片</a></h2>

<ul class="gallery"> 
    {% for image in images %}
	<li><img src="/image/{{image.id}}/" alt="" longdesc="" /></li> 
	{% endfor %}
</ul>
<script type="text/javascript"> 
    $('ul.gallery img').gallery(null,null,
        function(){
            var imageOffset = $('#img-gallery img').offset()
            var bottomOfImage = $('#img-gallery img').height() - $('#img-description').height();
                                $('#img-description').css({top: bottomOfImage,opacity:0.6});
            $('#img-gallery ul').css({right: -$('#img-gallery ul').width()+10});
        }
    );
</script> 

{% endblock %}
</body>
</html>
